Cesium 功能实现

2023/09/15 16:19:43

Cesium 基础功能实现：初始化、加载影像

初始化

Cesium.Context.memoryThreshold = 8;
//设置GPU内存阈值为8MB,当GPU内存使用超过这个阈值时，Cesium将开始执行一些优化策略，以降低内存使用并提高性能。
//地图将被嵌入到具有ID为machineMap的DOM元素中
window.machineMap = new Cesium.Viewer("machineMap", {
  shadows: true, //确定阴影是否由太阳投射形成。
  sceneModePicker: false, //获取场景模式拾取器(SceneModePicker)对象。
  infoBox: false, //获取信息框(InfoBox)对象。
  shouldAnimate: true,
  skyAtmosphere: false, //环绕地球边缘的蓝天和光晕效果，设置为false可将其关闭。
  selectionIndicator: false, //获取选择指示符(SelectionIndicator)对象。
  navigation: true, //获取导航帮助按钮(NavigationHelpButton)对象。
  skyBox: new Cesium.SkyBox({
    //用于渲染星辰的天空盒，未定义时，使用默认星辰效果。
    sources: {
      positiveX: require("@/assets/img/lt/rightav9.jpg"),
      negativeX: require("@/assets/img/lt/leftav9.jpg"),
      positiveY: require("@/assets/img/lt/frontav9.jpg"),
      negativeY: require("@/assets/img/lt/backav9.jpg"),
      positiveZ: require("@/assets/img/lt/topav9.jpg"),
      negativeZ: require("@/assets/img/lt/bottomav9.jpg"),
    },
  }),
});
let scene = window.machineMap.scene; //获取场景(scene)对象，包含了地图中的三维场景元素和功能
let widget = window.machineMap.cesiumWidget; //获取CesiumWidget对象，用于渲染地图的核心部分
let credit = window.machineMap.scene.frameState.creditDisplay;//用于显示地图上的信用标识的对象
credit.container.remove(credit._imageContainer);//从信用标识容器中移除了图像容器，通常是地图底部显示的Cesium图标和文本，即去掉cesium水印

try {
  console.log("开启无人机地图");
  // 设置相机位置，定位至模型
  scene.camera.setView({
    // 将经度、纬度、高度的坐标转换为笛卡尔坐标
    destination: Cesium.Cartesian3.fromDegrees(116.773446, 23.471069, 4632),
    orientation: {
      heading: 0.29510551037694466, // 相机的方向，单位是弧度，默认朝北
      pitch: -0.677166982317591,    // 相机的俯仰角度，单位是弧度，默认是朝下
      roll: 6.283185307179586,      // 相机的滚动角度，单位是弧度，默认是0
    },
  });
} catch (e) {
  if (widget._showRenderLoopErrors) {
    var title = "渲染时发生错误，已停止渲染。";
    widget.showErrorPanel(title, undefined, e);
  }
}

Viewer设置

window.machineMap = new Cesium.Viewer("machineMap", {
  shadows: true, //确定阴影是否由太阳投射形成。
  sceneModePicker: false, //获取场景模式拾取器(SceneModePicker)对象。
  infoBox: false, //获取信息框(InfoBox)对象。
  shouldAnimate: true,
  skyAtmosphere: false, //环绕地球边缘的蓝天和光晕效果，设置为false可将其关闭。
  selectionIndicator: false, //获取选择指示符(SelectionIndicator)对象。
  navigation: true, //获取导航帮助按钮(NavigationHelpButton)对象。
  skyBox: new Cesium.SkyBox({
    //用于渲染星辰的天空盒，未定义时，使用默认星辰效果。
    sources: {
      positiveX: require("@/assets/img/lt/rightav9.jpg"),
      negativeX: require("@/assets/img/lt/leftav9.jpg"),
      positiveY: require("@/assets/img/lt/frontav9.jpg"),
      negativeY: require("@/assets/img/lt/backav9.jpg"),
      positiveZ: require("@/assets/img/lt/topav9.jpg"),
      negativeZ: require("@/assets/img/lt/bottomav9.jpg"),
    },
  }),
});

相机设置

scene.camera.setView({
  // 将经度、纬度、高度的坐标转换为笛卡尔坐标
  destination: Cesium.Cartesian3.fromDegrees(116.773446, 23.471069, 4632),
  orientation: {
    heading: 0.29510551037694466, // 相机的方向，单位是弧度，默认朝北
    pitch: -0.677166982317591,    // 相机的俯仰角度，单位是弧度，默认是朝下
    roll: 6.283185307179586,      // 相机的滚动角度，单位是弧度，默认是0
  },
});

加载影像

function loadTDT(viewer, node) {
  let tdtUrl = "https://t{s}.tianditu.gov.cn/"; // 天地图
  let subdomains = ["0", "1", "2", "3", "4", "5", "6", "7"];
  // 如果node.mapid不为null，则从viewer的imageryLayers中移除该ID对应的图层。
  if (node.mapid != null) viewer.imageryLayers.remove(node.mapid, false);

  // 向viewer的imageryLayers添加一个新的影像提供者，并将其ID赋值给node.mapid
  node.mapid = viewer.imageryLayers.addImageryProvider(
    new Cesium.UrlTemplateImageryProvider({
      url: tdtUrl +
        "DataServer?T=" +
        node.mapStyle +
        "&x={x}&y={y}&l={z}&tk=" +
        node.token,
      subdomains: subdomains,
      tilingScheme: new Cesium.WebMercatorTilingScheme(),
      maximumLevel: 18,
    })
  );
}
// URL模板中的{s}会被替换为subdomains数组中的一个元素，也就是一个子域名。这意味着，每次请求影像数据时，都会从这八个子域名中选择一个来用。

function loadTIN(viewer, node) {
  let terrainProvider = new Cesium.CesiumTerrainProvider({
    url: data_url,
    isSct: true, // 表示使用SCT（Scaled and Offset Terrain）地形数据格式
    requestVertexNormals: true, // 表示是否请求顶点法线信息
    requestWaterMask: true, // 表示是否请求水面遮罩信息
  });
  viewer.terrainProvider = terrainProvider;
}